<template>
   <div class="input_video">
       <video-player class="video-player vjs-custom-skin" ref="videoPlayer" :playsinLine='true' :options="playerOptions">
           
            </video-player>
   </div>
</template>

<script>
import VueVideoPlayer from 'vue-video-player' // 视频播放器import 'video.js/dist/video-js.css'Vue.use(VueVideoPlayer)
import "video.js/dist/video-js.css"
const hls = require('videojs-contrib-hls')
Vue.use(VueVideoPlayer);
 Vue.use(hls);
    import {mapActions, mapMutations, mapState} from "vuex";
    export default {
        name: "A",
        data:()=>{
            return{
playerOptions:{
    playbackRate:[0.5,1.0,1.5,2.0],//可选是播放速度
    autoplay:false,//如果未true,浏览器准备好之后开始播放
muted:false,//默认情况下将会消除任何音频
loop:false,//是否视频结束后就重新开始
preload:"auto",//建议浏览器在<video>加在元素后是否应该开始下载视频数据.auto浏览器选择最佳行为,立即加载视频
language:"zh-CN",
aspectRatio:"16:9",//将播放器置于流畅模式,并计算播放器的动态大小时使用该值,值为一个比例
fluid:true,
sources:[{
    type:"video/mp4",
    src:'https://cdn.letv-cdn.com/2018/12/05/JOCeEEUuoteFrjCg/playlist.m3u8'
}],
notSupportedMessage:"此视频无法播放",//允许覆盖Video.js无法播放媒体源时显示的默认信息
controlBar:{
    timeDivider:true ,
    durationDisplay:true,//
    remainingTimeDisplay:false,//
    fullscreenToggle:true,
}

}
            }
        },

        //辅助函数和计算属性混合使用
        computed:{
    
        },
        methods:{

        }


    }
</script>

<style scoped>

</style>